<template>
	<view class="money-box">
		<view class="money-header">
			<view class="money-header-icon">
				<image src="../../../../static/logo.png" mode=""></image>
			</view>
			<view class="money-header-title">应收应付</view>
		</view>
		<view class="money-main">
			<view class="money-main-left">
				<view class="money-main-item">
					<view class="money-main-item-left">
						<text>待收款</text>
					</view>
					<view class="money-main-item-right">
						<text>{{moneyData.incomeNum}}笔</text>
					</view>
				</view>
				<view class="money-main-item">
					<view class="money-main-item-left">
						<text>金额小计：{{moneyData.incomeTotals}}</text>
					</view>
					<view class="money-main-item-right">
						<text class="tips">已审核通过的</text>
					</view>
				</view>
			</view>
			<view class="money-main-right">
				<view class="right-arrow">
					<image src="../../../../static/images/right.png"></image>
				</view>
			</view>
		</view>
		<view class="money-main">
			<view class="money-main-left">
				<view class="money-main-item">
					<view class="money-main-item-left">
						<text>待付款</text>
					</view>
					<view class="money-main-item-right">
						<text>{{moneyData.paymentNum}}笔</text>
					</view>
				</view>
				<view class="money-main-item">
					<view class="money-main-item-left">
						<text>金额小计：{{moneyData.paymentTotals}}</text>
					</view>
					<view class="money-main-item-right">
						<text class="tips">已审核通过的</text>
					</view>
				</view>
			</view>
			<view class="money-main-right">
				<view class="right-arrow">
					<image src="../../../../static/images/right.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			moneyData:{
				type: Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less">
	.money-box {
		padding: 10px 16px;
		border-top: 1px solid #dedede;

		.money-header {
			display: flex;
			align-items: center;

			.money-header-icon {
				margin-right: 5px;
				width: 20px;
				height: 20px;
				background-color: #808080;
				
				image{
					width: 100%;
					height: 100%;
				}
				
			}

			.money-header-title {
				color: #333;
			}

		}

		.money-main {
			padding: 10px 0;
			display: flex;
			align-items: center;

			.money-main-left{
				flex: 1;
				
				.money-main-item{
					display: flex;
					justify-content: space-between;
					font-size: 12px;
					line-height: 24px;
					
					.money-main-item-right{
						
						.tips{
							color: #999;
						}
						
					}
					
				}
				
			}
			
			.money-main-right{
				padding-left: 10px;
				
				.right-arrow{
					width: 30px;
					height: 30px;
					
					image{
						width: 100%;
						height: 100%;
					}
					
				}
				
			}

		}

	}
</style>
